<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    
  </style>
</head>
<body>
  
  <div class="btn"></div>

</body>
<script>

  $(".btn").css({
    width:"100px",
    height:"30px"
  }).html("按钮").css({
    background:"red"
  }).css({
    textAlign:"center",
    lineHeight:"30px"
  }).on("click", function(){
    console.log(1)
  }).on("click", function(){
    console.log(2)
  }).on("click", function(){
    console.log(3)
  })


  function $(s){
    const ele = document.querySelector(s);

    ele.html = function(val){
      ele.innerHTML = val;
      return ele;
    }
    ele.css = function(val){
      for(let i in val){
        ele.style[i] = val[i];
      }
      return ele;
    }
    ele.on = function(type, cb){
      ele.addEventListener(type, cb);
      return ele;
    }

    return ele;
  }
  
</script>
</html>